<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="房源筛选"
      left-arrow
      @click-left="back"
    />
    <div class="sorthouse">
      <van-sticky :offset-top="46">
        <div ref="screen" class="navtab">
          <div @click="showscreen($event)">
            {{ value1 }}<van-icon size="13" name="arrow-down" />
            <div class="content">
              <van-tree-select
                :items="items"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-item="areachoose"
              />
              <div class="btnarea">
                <van-button @click="clear">关闭</van-button>
                <van-button @click="screen">确定</van-button>
              </div>
            </div>
          </div>
          <div @click="showscreen($event)">
            {{ value2 }}<van-icon size="13" name="arrow-down" />
            <div class="content">
              <div class="moneybox">
                <div
                  v-for="item in moneylist"
                  :key="item"
                  ref="moneylist"
                  @click="moenychoose($event)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="btnarea">
                <van-button @click="clear">关闭</van-button>
                <van-button @click="screen">确定</van-button>
              </div>
            </div>
          </div>
          <div @click="showscreen($event)">
            {{ value3 }}<van-icon size="13" name="arrow-down" />
            <div class="content">
              <div class="moneybox">
                <div
                  v-for="item in roomlist"
                  :key="item"
                  ref="roomlist"
                  @click="labchoose($event)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="btnarea">
                <van-button @click="clear">关闭</van-button>
                <van-button @click="screen">确定</van-button>
              </div>
            </div>
          </div>
          <div @click="showscreen($event)">
            {{ value4 }}<van-icon size="13" name="arrow-down" />
            <div class="content">
              <div class="sortbox">
                <div
                  v-for="item in sortlist"
                  :key="item"
                  ref="sortlist"
                  @click="sortchoose($event)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="btnarea">
                <van-button @click="clear">关闭</van-button>
                <van-button @click="screen">确定</van-button>
              </div>
            </div>
          </div>
        </div>
      </van-sticky>
    </div>
    <div v-show="houselist.length != 0" class="list">
      <div
        v-for="(item, index) in houselist"
        :key="index"
        class="house"
        @click="jumptobuydetail(item.houseId, item)"
      >
        <img :src="item.houseImage" />
        <div class="intrduce">
          <div class="title1">{{ item.subdistrict }}</div>
          <div class="title2">
            <span>{{ item.houseType }}</span
            >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
            >|<span>{{ item.floor }}</span>
          </div>
          <div class="tips">
            <span v-show="item.aspectType">{{ item.aspectType }}</span>
            <span v-show="item.decoration">{{ item.decoration }}</span>
            <span v-show="item.houseGenre">{{ item.houseGenre }}</span>
          </div>
          <div v-show="item.listedPrice != '面议'" class="title3">
            {{ item.listedPrice }}万<span>
              <span
                >{{
                  ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
                }} </span
              >元/m<span class="up">2</span></span
            >
          </div>
          <div v-show="item.listedPrice == '面议'" class="title3">
            {{ item.listedPrice }}
          </div>
        </div>
      </div>
    </div>
    <div v-show="houselist.length == 0 && !show" class="nohouse">
      <img src="../../assets/nohouse.png" alt="" />
      <div>啊哦~当前区域暂无房源</div>
    </div>
    <div v-show="show" class="nohouse">
      <img src="../../assets/nohouse.png" alt="" />
      <div>加载中...</div>
    </div>
  </div>
</template>

<script>
import { getBuyhouselist } from "../../apis/house.js";
// import { getDisarea } from '../../apis/map.js'
import local from "../../utils/local.js";
import {
  getChooseCityQualify,
  getChooseCity,
  getGeolocation,
  getHouseListBuy,
  setHouseListBuy,
} from "@/utils/auth";
import { baseUtils } from "@/utils/baseUtils";
import { _local } from "@/utils/storage";
import { getAreaList } from "@/apis/city";
import { addLog } from "@/apis/user";


export default {
  data() {
    return {
      show: true,
      value1: this.$route.query.value1,
      value2: this.$route.query.value2,
      value3: this.$route.query.value3,
      value4: this.$route.query.value4,
      city: "",
      cityCode: "",
      sendval: { currentPage: 1, perPage: 10 },
      houselist: [],
      activeId: 0,
      activeIndex: 0,
      items: [
        {
          text: "区域",
          children: [],
        },
      ],
      roomlist: [
        "不限",
        "1室1厅1卫",
        "1室2厅1卫",
        "2室1厅1卫",
        "2室2厅1卫",
        "3室1厅1卫",
        "3室1厅2卫",
        "3室2厅1卫",
        "3室2厅2卫",
        "4室1厅1卫",
        "4室1厅2卫",
        "4室2厅1卫",
        "4室2厅2卫",
      ],
      moneylist: [
        "不限",
        "<50万",
        "50万~100万",
        "100万~150万",
        "150万~200万",
        "200万~250万",
        "250万~300万",
        ">300万",
      ],
      sortlist: [
        "默认排序",
        "价格由高到低",
        "价格由低到高",
        "面积从小到大",
        "面积从大到小",
        "业主挂牌",
        "经纪人挂牌"
      ],
      loading: false,
      arealist: [],
    };
  },
  created() {
    const chooseCityQualify = getChooseCityQualify();
    if (!baseUtils.isEmpty(chooseCityQualify)) {
      this.city = chooseCityQualify.city;
      this.cityCode = chooseCityQualify.cityCode;
    } else {
      const chooseCity = getChooseCity();
      const geolocation = getGeolocation();
      this.city = chooseCity ? chooseCity.city : geolocation.city;
      this.cityCode = chooseCity ? chooseCity.cityCode : geolocation.cityCode;
    }
    if (local.get("searchdata")) {
      this.sendval = JSON.parse(local.get("searchdata"));
      this.sendval.citycode = this.cityCode;
      getBuyhouselist(this.sendval).then((res) => {
        const code = res.code;
        if (code === 201 || code === 200) {
          this.show = false;
          if (res.result.list.length === 10) {
            this.loading = true;
          }
          this.houselist = res.result.list;
        }
      });
    } else {
      this.sendval.citycode = this.cityCode;
      getBuyhouselist(this.sendval).then((res) => {
        const code = res.code;
        if (code === 201 || code === 200) {
          this.show = false;
          if (res.result.list.length === 10) {
            this.loading = true;
            this.houselist = res.result.list;
          }
        }
      });
    }

    this.getdis();
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    local.del("searchdata");
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    back() {
      this.$router.go(-1);
      setTimeout(() => {
        window.location.reload();
      }, 100);
    },
    async getdis() {
      await getAreaList({
        citycode: _local.get("cityCode"),
      }).then((res) => {
        console.log("getAreaList", res);
        if (
          this.city === "上海市" ||
          this.city === "北京市" ||
          this.city === "天津市" ||
          this.city === "重庆市"
        ) {
          this.arealist = res.result.list.slice(1);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        } else {
          this.arealist = res.result.list.slice(2);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        }
      });
    },
    jumptobuydetail(e, item) {
      const list = getHouseListBuy();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId === item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseListBuy(list);

      this.$router.push({ path: "/buyhousedetail", query: { houseId: e } });
    },
    screen() {
      addLog({
        adcode: _local.get("adCode"),
        code: "click",
        page_name: "二手房筛选二级页面",
        system: _local.get("device"),
        uid: _local.get("ryId"),
        describe: `筛选条件:${this.value1},${this.value2},${this.value3},${this.value4},城市:${_local.get("city")}`,
      }).then((res) => {});
      document.documentElement.scrollTop = 0;
      this.loading = false;
      this.sendval.currentPage = 1;
      getBuyhouselist(this.sendval).then((res) => {
        const code = res.code;
        if (code === 201) {
          if (res.result.list.length === 10) {
            this.loading = true;
          }
          this.houselist = res.result.list;
        }
      });
      this.$refs.screen.children.forEach((v) => {
        v.classList.remove("active");
      });
    },
    showscreen(e) {
      if (e.currentTarget === e.target) {
        if (e.currentTarget.classList[0] === "active") {
          e.currentTarget.classList.remove("active");
        } else {
          this.$refs.screen.children.forEach((v) => {
            v.classList.remove("active");
          });
          e.currentTarget.classList.add("active");
        }
      }
    },
    labchoose(event) {
      this.value3 = event.currentTarget.innerText.slice(0, 2);
      if (event.currentTarget.classList[0] === "mboxactive") {
        event.currentTarget.classList.remove("mboxactive");
        this.sendval.houseType = "0";
      } else {
        this.$refs.roomlist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        if (event.target.innerText === "1室1厅1卫") {
          this.sendval.houseType = "1";
        } else if (event.target.innerText === "1室2厅1卫") {
          this.sendval.houseType = "2";
        } else if (event.target.innerText === "2室1厅1卫") {
          this.sendval.houseType = "3";
        } else if (event.target.innerText === "2室2厅1卫") {
          this.sendval.houseType = "4";
        } else if (event.target.innerText === "3室1厅1卫") {
          this.sendval.houseType = "5";
        } else if (event.target.innerText === "3室1厅2卫") {
          this.sendval.houseType = "6";
        } else if (event.target.innerText === "3室2厅1卫") {
          this.sendval.houseType = "7";
        } else if (event.target.innerText === "3室2厅2卫") {
          this.sendval.houseType = "8";
        } else if (event.target.innerText === "4室1厅1卫") {
          this.sendval.houseType = "9";
        } else if (event.target.innerText === "4室1厅2卫") {
          this.sendval.houseType = "10";
        } else if (event.target.innerText === "4室2厅1卫") {
          this.sendval.houseType = "11";
        } else if (event.target.innerText === "4室2厅2卫") {
          this.sendval.houseType = "12";
        } else if (event.target.innerText === "不限") {
          this.sendval.houseType = "";
        }
        event.currentTarget.classList.add("mboxactive");
      }
    },
    areachoose(data) {
      this.sendval.adcode = data.id;
      this.value1 = data.text.slice(0, 2);
    },
    moenychoose(e) {
      this.value2 = e.currentTarget.innerText.slice(0, 2);
      if (e.currentTarget.classList[0] === "mboxactive") {
        e.currentTarget.classList.remove("mboxactive");
        this.sendval.priceMin = "1";
        this.sendval.priceMax = "1000000";
      } else {
        this.$refs.moneylist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        if (e.target.innerText === "<50万") {
          this.sendval.priceMin = "1";
          this.sendval.priceMax = "50";
        } else if (e.target.innerText === "50万~100万") {
          this.sendval.priceMin = "50";
          this.sendval.priceMax = "100";
        } else if (e.target.innerText === "100万~150万") {
          this.sendval.priceMin = "100";
          this.sendval.priceMax = "150";
        } else if (e.target.innerText === "150万~200万") {
          this.sendval.priceMin = "150";
          this.sendval.priceMax = "200";
        } else if (e.target.innerText === "200万~250万") {
          this.sendval.priceMin = "200";
          this.sendval.priceMax = "250";
        } else if (e.target.innerText === "250万~300万") {
          this.sendval.priceMin = "250";
          this.sendval.priceMax = "300";
        } else if (e.target.innerText === ">300万") {
          this.sendval.priceMin = "300";
          this.sendval.priceMax = "100000";
        } else if (e.target.innerText === "不限") {
          this.sendval.priceMin = "1";
          this.sendval.priceMax = "100000";
        }
        e.currentTarget.classList.add("mboxactive");
      }
    },
    sortchoose(e) {
      this.value4 = e.currentTarget.innerText.slice(0, 2);
      if (e.currentTarget.classList[0] === "mboxactive") {
        e.currentTarget.classList.remove("mboxactive");
      } else {
        this.$refs.sortlist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        e.currentTarget.classList.add("mboxactive");
        if (e.target.innerText === "价格由高到低") {
          this.sendval.price = "1";
          this.sendval.acre = "0";
          this.sendval.order = "1";
        } else if (e.target.innerText === "价格由低到高") {
          this.sendval.price = "1";
          this.sendval.acre = "0";
          this.sendval.order = "2";
        } else if (e.target.innerText === "面积从小到大") {
          this.sendval.price = "0";
          this.sendval.acre = "1";
          this.sendval.order = "2";
        } else if (e.target.innerText === "面积从大到小") {
          this.sendval.price = "0";
          this.sendval.acre = "1";
          this.sendval.order = "1";
        } else if (e.target.innerText === "默认排序") {
          this.sendval.price = "0";
          this.sendval.acre = "0";
          this.sendval.order = "0";
        }else if(e.target.innerText === "业主挂牌"){
          this.sendval.release_role="2"
        }else if(e.target.innerText === "经纪人挂牌"){
          this.sendval.release_role="1"
        }
      }
    },
    clear() {
      this.$refs.screen.children.forEach((v) => {
        v.classList.remove("active");
      });
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.sendval.currentPage++;
        getBuyhouselist(this.sendval).then((response) => {
          const code = response.code;
          if (code === 201) {
            if (response.result.list.length !== 10) {
              this.loading = false;
            }
            this.houselist = [...this.houselist, ...response.result.list];
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.sorthouse {
  .navtab {
    background-color: #fff;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    font-size: 14px;
    .content {
      background-color: #fff;
      position: absolute;
      width: 100%;
      top: 40px;
      left: 0;
      z-index: 10000;
      color: #000;
      display: none;
      .way {
        margin: 15px 20px 10px;
        font-size: 14px;
        span {
          display: inline-block;
          text-align: center;
          width: 70px;
          line-height: 35px;
          height: 35px;
          background-color: #fff;
          color: #46b8cb;
          border: 1px solid #46b8cb;
          border-radius: 5px;
          margin-right: 10px;
          margin-top: 5px;
        }
        .chooseactive {
          background-color: #46b8cb;
          color: #fff;
        }
        .tipwords {
          font-size: 13px;
          font-weight: bold;
          margin: 10px 0;
        }
      }
      .btnarea {
        .van-button {
          font-size: 16px;
          &:first-child {
            width: 35%;
            background-color: #fff;
            border: none;
          }
          &:last-child {
            width: 65%;
            background-color: #46b8cb;
            color: #fff;
          }
        }
      }
      .moneybox,
      .sortbox {
        text-align: center;
        font-size: 14px;
        height: 300px;
        overflow-y: scroll;
        div {
          height: 40px;
          line-height: 40px;
        }
        .mboxactive {
          color: #46b8cb;
        }
      }
    }
    .active {
      color: #d43b33;
      .content {
        display: block;
      }
    }
  }
}
.house {
  background-color: #fff;
  margin: 0 15px;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 120px;
    height: 110px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 0px 2px;
        border: 1px solid #45b7cb;
        color: #45b7cb;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 12px;
        margin-left: 3px;
      }
    }
  }
  .up {
    margin: 0px !important;
    font-size: 12px;
    vertical-align: super;
    transform: scale(calc(10 / 12));
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>
